<template>
	<div class="Team">
		<!-- 我的团队 -->
		<div class="Team-head">
			<div></div>
			<div class="head-title">团队数据</div>
		</div>
		<div class="search">
			<el-input v-model="quertInfo.publicName" placeholder="请输入公众号名称"></el-input>
			<el-button type="primary" class="chaxunBtn" @click="search">查询</el-button>
		</div>
		<!-- 列表 -->
		<el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%">
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column prop="id" label="id" width="60"></el-table-column>
			<el-table-column
			    prop="headPhoto"
			    width="80"
			    label="头像">
			    <template slot-scope="scope">
			        <img class="publicTouxiang" referrerPolicy="no-referrer" :src="scope.row.headPhoto" alt="">
			    </template>
			</el-table-column>
			<el-table-column prop="name" label="用户名" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="publicName" label="公众号名称" width="160"></el-table-column>
			<el-table-column prop="querySecond" label="查询次数" width="100"></el-table-column>
			<el-table-column prop="residueSecond" label="剩余次数" width="100"></el-table-column>
			<el-table-column prop="regDate" label="注册时间" min-width="180"></el-table-column>
			<el-table-column prop="update" label="更新时间" min-width="180"></el-table-column>
		</el-table>
		<div class="pagination">
		    <el-pagination
		        @current-change="handleCurrentChange"
		        style="float:right"
		        background
		        :current-page="quertInfo.pagenum"
		        :page-size="quertInfo.pagesize"
		        layout="prev, pager, next, total"
		        :total="total">
		    </el-pagination> 
		</div>
	</div>
</template>

<script>
	export default {
		name:'Team',
		data() {
		  return {
			tableData: [],
			quertInfo:{
				pagenum:1,
				pagesize:10,
				publicName:''
			},
			total:0
		  }
		},
		methods: {
			handleCurrentChange(newPage){
				this.quertInfo.pagenum = newPage;
				this.getTeamList()
			},
		  search(){
			  	this.getTeamList()
		  },
		  getTeamList(){
			 	this.$http.post('getTemaList',this.quertInfo).then((data)=>{
					if(data.data.success){
						this.total = data.data.data.total;
						this.tableData = data.data.data.tableData;
						var num = data.data.msg.length;
						if ( num>1 ) this.$message({
							showClose: true,
							message: data.data.msg,
							type: 'success',
							offset:'65',
							duration:1000
						});
					}else{
						this.$message.error(data.data.msg)
					}
				})
		  }
		},
		created () {
			this.getTeamList()
		}
	}
</script>

<style scoped>
	.Team-head{
		height: 30px;
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}
	.Team-head>div:nth-child(1){
		width: 4px;
		height: 20px;
		background-color: #2ad199;
		margin-right: 10px;
	}
	.search{
		display: flex;
		margin-bottom: 20px;
	}
	.el-input{
		width: 200px;
		margin-right: 20px;
	}
	
	.publicTouxiang{
	    width: 40px;
	    height: 40px;
	    border-radius: 50%;
	}
	
	/* 分页 */
	.pagination{
	    padding: 10px 30px 30px;
	    overflow: hidden;
	}
</style>
